<!--
 Copyright (c) 2018
 Mainflux

 SPDX-License-Identifier: Apache-2.0
-->

<div class="container" style="height: 80vh" fxLayoutAlign="center center">
  <form fxLayout="column" [formGroup]="loginForm" (ngSubmit)="login()" fxFlex="30%" fxFlex.sm="70%" fxFlex.xs="90%">
    <mat-card>
      <mat-card-title>Login</mat-card-title>
      <mat-card-content class="loginCard" fxLayout="column" fxLayoutAlign="space-evenly">
        <mat-form-field fxFlex="40%">
          <input type="text" class="emailInput" required matInput placeholder="Email" formControlName="email"/>
          <mat-error *ngIf="loginForm.get('email').errors?.required">
            Email is required
          </mat-error>
          <mat-error *ngIf="loginForm.get('email').errors?.email">
            Email must be valid
          </mat-error>
        </mat-form-field>
        <mat-form-field fxFlex="30%">
          <input type="password" class="passwordInput" required matInput placeholder="Password" formControlName="password" />
          <mat-error *ngIf="loginForm.get('password').errors?.required">
            Password is required
          </mat-error>
        </mat-form-field>
      </mat-card-content>
      <mat-card-actions fxLayout="column">
        <button type="submit" [disabled]="loginForm.invalid" mat-raised-button color="primary" class="loginButton">Login</button>
        <button mat-button (click)="signup()" class="signupButton">Sign Up with Email</button>
      </mat-card-actions>
    </mat-card>
  </form>
</div>